<template>
  <div
    class="content-page custom-scrollbar"
    :class="[{'hover': scrollbarVisible, 'card-layout': isCard}]"
    ref="content"
    @scroll="paperScroll">
    <slot></slot>
  </div>
</template>

<script>
import scrollbar from 'mixins/scrollbar';
export default {
  name: 'default',
  mixins: [scrollbar],
  props: {
    isCard: [Boolean],
    hasPagination: Boolean,
    hasFixedBottom: Boolean,
    title: [Boolean]
  },
  data () {
    return {
      scrollbarVisible: true,
    }
  },
  mounted () {
    const headNavHeight = 60;
    const fixedTopHeight = 56;
    const fixBottomHeight = 50;
    const paginationHeight = 72;
    let height = this.$_$(window).height();
    height = height - headNavHeight - fixedTopHeight;
    if (this.hasPagination) {
      height = height - paginationHeight;
    }
    if (this.hasFixedBottom) {
      height = height - fixBottomHeight;
    }
    this.$refs.content.style.height = `${height}px`;
  }
}
</script>
